<template>
  <div>
    <!-- 小卡片 -->
    <el-row :gutter="12"
            style="margin-top:24px;">
      <el-col :span="24">

        <div style="height:81px;    padding: 0 16px;"
             class="card">
          <el-form ref="baseForm"
                   label-width="100px"
                   :label-position="'top'"
                   style="margin-top: 0;display:flex;"
                   class="ht-search-form ">

            <el-form-item label="时间线"
                          class="boder">

              <el-radio-group v-model="state.radio"
                              style="display:flex;">
                <el-radio :label="true"
                          style="  margin-right: 17px;">
                  顺序
                </el-radio>
                <el-radio :label="false">
                  倒序
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="搜索"
                          style="width:354px;margin-left:24px;">
              <el-input placeholder="搜索    酒品名称、酒品代码"></el-input>
            </el-form-item>
            <el-form-item label="业务类别"
                          style="width:354px;margin:0 24px;">
              <ht-select-org :clearable="true"></ht-select-org>
            </el-form-item>

            <el-button type="primary"
                       style="width:60px;height:32px;margin-right:6px;margin-top: 34px;">筛选</el-button>
            <el-button type=""
                       style="width:60px;height:32px;margin-top: 34px;">重置</el-button>

          </el-form>

        </div>
      </el-col>

    </el-row>

    <!-- 主要内容 -->
    <div class="block"
         style="padding:0 16px; margin-top: 18px;display:flex;">

      <span style="    margin-top: -7px;
    margin-right: 16px;">入罐</span>
      <el-timeline style="padding: 0; flex:1;">
        <el-timeline-item timestamp="2020-05-06 16:56 章叁"
                          color="#CACECB;"
                          placement="top">
          <div class="el-card">
            <el-tag type="success">收酒</el-tag>
            <!-- 内容 -->
            <div style="width: 940px;height: 106px;margin-left:24px;margin-top:16px;">
              <el-row style="border-bottom: 1px dashed #D8DEDA;height:53px">
                <el-col :span="4"
                        style="border-right: 1px dashed #D8DEDA;">

                  <div style="text-align: center;color: #323433;">B酒</div>
                  <div style="text-align: center;color: #969C98;">酒品名称</div>
                </el-col>
                <el-col :span="4"
                        style="border-right: 1px dashed #D8DEDA;">

                  <div style="text-align: center;color: #323433;">B01</div>
                  <div style="text-align: center;color: #969C98;">酒品代码</div>
                </el-col>
                <el-col :span="4"
                        style="border-right: 1px dashed #D8DEDA;">

                  <div style="text-align: center;color: #323433;">1989</div>
                  <div style="text-align: center;color: #969C98;">酒体年份</div>
                </el-col>
                <el-col :span="4"
                        style="border-right: 1px dashed #D8DEDA;">

                  <div style="text-align: center;color: #323433;">11 %vol</div>
                  <div style="text-align: center;color: #969C98;">酒度</div>
                </el-col>
                <el-col :span="4"
                        style="border-right: 1px dashed #D8DEDA;">

                  <div style="text-align: center;color: #323433;">11 ℃</div>
                  <div style="text-align: center;color: #969C98;">温度</div>
                </el-col>
                <el-col :span="4">

                  <div style="text-align: center;color: #323433;">888.88 T</div>
                  <div style="text-align: center;color: #969C98;">酒品吨数</div>
                </el-col>

              </el-row>
              <el-row style="height:53px;margin-top:16px;">

                <el-col :span="8">

                  <el-row>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                  </el-row>

                </el-col>
                <el-col :span="8">

                  <el-row>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                    <el-col :span="8"
                            style="border-right: 1px dashed #D8DEDA;">
                      <div style="text-align: center;color: #323433;">88.88 Pa</div>
                      <div style="text-align: center;color: #969C98;">压变期初值</div>
                    </el-col>
                  </el-row>

                </el-col>

                <el-col :span="8">

                  <div style="text-align: center;color: #323433;">SJ202308020001</div>
                  <div style="text-align: center;color: #969C98;">业务单号</div>
                </el-col>

              </el-row>

            </div>

          </div>
        </el-timeline-item>
        <el-timeline-item timestamp="2020-05-06 16:56 章叁"
                          color="#CACECB"
                          placement="top">

        </el-timeline-item>

      </el-timeline>

    </div>

  </div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  radio: boolean;
}
@Component
export default class Index extends Vue {
  /** 数据 */
  state: State = {
    loading: false,
    radio: true,
  };
  /** 生命周期 */
  /** 方法 */
  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang='scss' scoped>
:deep(.el-radio__label) {
  padding-left: 5px;
}
.card {
  /* 中性色/#FFFFFF */
  background: #ffffff;

  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
}

.boder {
  padding-right: 24px;
  border-right: 1px dashed #d8deda;
}

:deep(.el-radio-group) {
  margin-top: 14px !important;
}

.position {
  position: absolute;
  left: 244px;
  top: 1px;
  z-index: 999;
}

:deep(.el-timeline-item__node--normal) {
  width: 8px;
  height: 8px;
  left: 1px;
}
:deep(.el-card) {
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1)
    ),
    #f7f9f8;

  height: 172px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 17px;
}
:deep(.el-timeline-item__timestamp) {
  color: #323433;
}

:deep(.el-timeline-item__timestamp.is-top) {
  margin-bottom: 8px !important;
  padding-top: 0px !important;
  color: #323433 !important;
}

:deep(.el-timeline-item) {
  padding-bottom: 16px !important;
}
:deep(.el-timeline-item__timestamp.is-top) {
  color: #969c98 !important;
  font-size: 14px;
}
</style>